﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Treemap Chart</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Treemap Chart"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n381","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="A treemap chart is a two-dimensional linear chart that can be used to display the hierarchical data as a set of nested rectangles organized in a tree-like structure in the worksheet." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="47fe273c-8658-4347-ab6f-c6a45f222bf4"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="1124f6de-499a-4032-8d2a-c338ec23d096"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="11"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / <a href="ChartTypes.html">Chart Types</a>
 / Treemap Chart</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Treemap Chart<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>A treemap chart&nbsp;is a two-dimensional linear chart that&nbsp;can be used to display the hierarchical data as a set of nested rectangles organized in a tree-like structure in the worksheet.</p>

<p>SpreadJS supports treemap charts in spreadsheets for enhanced data visualization and&nbsp;effective information analysis. This&nbsp;type of chart is useful especially when users have space constraints and they need to plot thousands of datapoints with numerous entities defined&nbsp;in the tables in the worksheet.</p>

<h4>Working of Treemap Chart</h4>

<p>In a treemap chart, users can compare quantitative values or aggregated values within one or more categories via visualizing data as colored rectangles (called branches), with&nbsp;each branch (or rectangle)&nbsp;representing a level in a hierarchy containing other rectangles ( called leaves). The area (inner space) of each rectangle is allocated according to the measured quantitative value. The rectangles are arranged based on their numeric dimensions (width and height) from the upper left corner&nbsp;(largest size) to the lower right corner (smallest size).</p>

<p>In SpreadJS, the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.DataPoints.html">Datapoints</a> class represents all the dataPoints in a chart series.&nbsp;Datapoints can be used to represent each highest level and their sub data points&nbsp;in the hierarchical data.</p>

<h4>Example</h4>

<p>For instance, let's take an example of world population as shown in the below table&nbsp;with four major regions representing datapoints (top levels) - Asia, Africa, Europe and Others. These regions are further divided into subregions, which are further divided into countries with each country having unique population statistics.</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/data-treemap-chart.png" /></p>

<p>When a treemap chart is created for the above data, it becomes much&nbsp;easier and faster&nbsp;to understand information in hierarchically structured rectangles that depict the overall summary of the bulk data lying in the spreadsheets.</p>

<p>An image&nbsp;of the treemap chart&nbsp;depicting world population&nbsp;for the above plotted data for different regions, subregions and countries&nbsp;is shown in the below screenshot. Each category or level is represented by a unique rectangle filled with a different color that makes it simple to&nbsp;compare different categories.</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/treemap_chart.png" /></p>

<p>Clearly, the colored rectangles in the above image&nbsp;depict four different categroies (Asia, Africa, Europe and Others) amongst which Asia is the region with highest population in the world (the largest rectangle being placed at the upper left corner)&nbsp;and Europe is the region with lowest population in the world (the smallest rectangle being placed at the lower right corner). Also, the most populous country accroding to the above chart is China in the Eastern subregion.</p>

<h4>Using Code</h4>

<p>This example shows how to set the treemap chart in a worksheet.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>// Creating Treemap chart</p>

                    <p>window.onload = function ()</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                    &nbsp;&nbsp;&nbsp;var sheet = spread.getActiveSheet();</p>

                    <p>&nbsp;&nbsp;&nbsp;sheet.setColumnWidth(2, 100);<br />
                    &nbsp;&nbsp;&nbsp;sheet.setColumnWidth(4, 100);</p>

                    <p>&nbsp;&nbsp;&nbsp;var dataArray =</p>

                    <p>&nbsp;&nbsp; [<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Region', 'Subregion', 'country', 'Population'],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Asia', 'Southern', 'India', 1354051854],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, , 'Pakistan', 200813818],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, , 'Bangladesh', 166368149],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, , 'Others', 170220300],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Eastern', 'China', 1415045928],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, , 'Japan', 127185332],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, , 'Others', 111652273],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'South-Eastern', , 655636576],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Western', , 272298399],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Central', , 71860465],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Africa', 'Eastern', , 433643132],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Western', , 381980688],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Northern', , 237784677],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[, 'Others', , 234512021],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Europe', , , 742648010],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Others', , , 1057117703]<br />
                    &nbsp;&nbsp;&nbsp;];<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;</p>

                    <p>&nbsp;&nbsp; sheet.setArray(1, 1, dataArray);</p>

                    <p>&nbsp;&nbsp;&nbsp;var chart = sheet.charts.add('chart1',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

                    <p>&nbsp;&nbsp; GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");<br />
                    &nbsp;&nbsp;&nbsp;var title = chart.title()<br />
                    &nbsp;&nbsp;&nbsp;title.fontSize = "24.00";<br />
                    &nbsp;&nbsp;&nbsp;title.color = "rgb(228,65,54)";<br />
                    &nbsp;&nbsp;&nbsp;title.text = 'WORLD POPULATION';<br />
                    &nbsp;&nbsp;&nbsp;chart.title(title);</p>

                    <p>&nbsp;&nbsp; var dataPoints = chart.series().dataPoints();<br />
                    &nbsp;&nbsp;&nbsp;var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31'];<br />
                    &nbsp;&nbsp;&nbsp;fillColors.forEach(function (color, index)</p>

                    <p>&nbsp;{<br />
                    &nbsp;&nbsp;&nbsp;var dataPoint = dataPoints.get(index);<br />
                    &nbsp;&nbsp;&nbsp;dataPoint.fillColor = color;<br />
                    &nbsp;&nbsp;&nbsp;dataPoint.transparency = 0; // 0~1<br />
                    &nbsp;&nbsp; dataPoints.set(index, dataPoint);<br />
                    &nbsp; })</p>

                    <p>};</p>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="i-box i-box-note">
    <strong>Note:</strong> The treemap chart supports only one series. Also, the data labels in a treemap chart can be configured to display category names only.
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
